﻿@{
    Layout = null;
    ViewData["Title"] = "Index";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>邮箱发送测试类</h1>
<div id="app">
    <el-form ref="mailtest" :model="mailtest" label-width="130px">

        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="发送人:">
                    <el-input v-model="mailtest.fromPerson" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div v-for="item in tabs" :key="item.id">
                    <el-form-item label="请输入接收人邮箱:">
                        <el-input v-model="item.mailTo" placeholder="请输入接收人邮箱"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="1">
                <el-button v-on:click="addInput">添加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button v-on:click="delInput">移除</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="请输入邮件标题:">
                    <el-input v-model="mailtest.mailTitle" placeholder="请输入邮件标题"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="请输入邮件内容:">
                    <el-input type="textarea"
                              placeholder="请输入邮件内容"
                              v-model="mailtest.mailBody"
                              :autosize="{ minRows: 4, maxRows: 8}"
                              maxlength="30"
                              show-word-limit>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6" :offset="5">
                <el-button type="primary" v-on:click="handleSend">发送</el-button>
            </el-col>
        </el-row>
    </el-form>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            tabs: [
                { id: 1, mailTo: '' }
            ],
            mailtest: {
                fromPerson: '1760708378@qq.com',
                recipientArry: [],
                mailCcArray: ["3099558075@qq.com"],
                mailTitle: '',
                mailBody: '',
                code: 'duwvvjzdmmbqbjei',
                isbodyHtml: false,
            },
        },
        methods: {
            addInput() {
                //递增ID，使接收人表单唯一
                var id = parseInt(this.tabs[this.tabs.length - 1].id) + 1;
                this.tabs.push({ id: id, mailTo: '' });
            },
            delInput() {
                //删除input表单，拿到最大的下标，这里删除文本框是根据数组下标删除
                let index = this.tabs.length - 1;
                this.tabs.splice(index);
            },
            handleSend() {
                //将键值对数组重新拼接成string类型数组，用于赋值发送至多个邮箱
                this.tabs.forEach((item, index) => {
                    this.mailtest.recipientArry.push(item.mailTo);
                })
                console.info("this.mailtest.recipientArry:",this.mailtest.recipientArry,"长度为：",this.mailtest.recipientArry.length);
                //声明键值对，提供FromForm键值对传值方
                let formData = new FormData();
                //发送人
                formData.append("fromPerson", this.mailtest.fromPerson);
                //收件人集合
                formData.append("recipientArry", this.mailtest.recipientArry);
                //抄送人集合
                formData.append("mailCcArray", this.mailtest.mailCcArray);
                //标题
                formData.append("mailTitle", this.mailtest.mailTitle);
                //主文
                formData.append("mailBody", this.mailtest.mailBody);
                axios.post('/MailTest/mailPosyForm', formData).then((res) => {
                    if (res.data) {
                        alert("发送成功！");
                    } else {
                        alert("有问题！");
                    }
                })
            }
        },
        mounted: function() {

        }
    })

</script>